<template>
  <div class="detail-container">
    <div class="main-info-warpper">
      <div class="top flex flex-column">
        <div class="main-info-title fs18 flex flex-row-center">基本信息</div>
        <div class="content mt30 flex">
          <div class="left">
            <img
              v-if="info.avatar"
              :src="info.avatar"
              alt="分销员"
              class="imgs"
            />
            <img
              v-else-if="info.imgUrl"
              :src="info.imgUrl"
              alt="分销顾问"
              class="imgs"
            />
            <img
              v-else
              src="@/assets/imgs/none.png"
              alt="无信息"
              class="imgs"
            />
          </div>
          <div class="center flex flex-column flex-center" style="flex: 1">
            <el-row :gutter="50" class="w100p">
              <el-col :span="6">
                姓名：{{ info.username || info.userName }}
              </el-col>
              <el-col :span="4">
                {{ downPeople }}：{{ info.lowercount || info.subordinate || 0 }}
              </el-col>
              <el-col :span="8">
                {{ name }}：{{ info.createdate || info.createTime }}
              </el-col>
              <el-col v-if="identity == 1" :span="6">
                相关订单金额：{{ info.orderNumber || info.totalMoney || 0 }}元
              </el-col>
            </el-row>

            <el-row :gutter="50" class="w100p mt30">
              <el-col :span="6">
                手机号：{{ info.cellphone || info.mobilePhone || '无' }}
              </el-col>
              <el-col :span="4">
                所属地区：{{ info.region || info.branchSchool || '无' }}
              </el-col>
              <el-col :span="8">
                分销状态：{{ info.statusVal || handleStatus(info.status) }}
              </el-col>
              <el-col :span="6">备注：{{ info.remark || '无' }}</el-col>
            </el-row>

            <el-row v-if="identity == 1" :gutter="50" class="w100p mt30">
              <el-col :span="6">
                所属招顾名称：{{ info.spoorer || '无' }}
              </el-col>
              <el-col :span="6">
                邀请人（上一级）：{{ info.inviteuser || '无' }}
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
      <div v-if="identity == 1" class="asset flex flex-column">
        <div class="main-info-title fs18 flex flex-row-center">账户资产</div>
        <div class="asset-content flex mt30">
          <div class="asset-item flex flex-center">
            <span>累计获得积分：</span>
            <span>{{ info.allbalance }}</span>
          </div>
          <div class="asset-item flex flex-center">
            <span>已提现积分：</span>
            <span>{{ info.allbalance - info.balance }}</span>
          </div>
          <div class="asset-item flex flex-center">
            <span>未提现积分：</span>
            <span>{{ info.balance }}</span>
          </div>
        </div>
      </div>
      <div class="bottom mt30">
        <div class="main-info-title fs18 flex flex-row-center">
          {{ downinfo }}
        </div>
        <div class="content mt30">
          <HHtable
            ref="table"
            :border="true"
            :height="400"
            :total="total"
            :table-data="tableData"
            :table-column="tableColumn"
            @page-click="pageClick"
          >
            <template #first="{ data }">
              <div class="flex-center">
                <span>{{ data.buyerName }}</span>
                <span>{{ data.buyerPhone }}</span>
              </div>
            </template>
          </HHtable>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import HHtable from '@/components/HH-table'
  import { splicingUrl, imageUrl } from '@/utils/validate'
  import {
    getDistributorDetail,
    getDistributorUpDown,
  } from '@/api/distribution'
  import {
    getCounselorDetail,
    getCounselorDown,
    getUnfreezeCounselor,
  } from '@/api/conunselor'
  import { freezeDistributor } from '@/api/common'
  export default {
    components: {
      HHtable,
    },
    data() {
      const formatter = function (row, column, cellValue, index) {
        if (cellValue == 0) return '冻结'
        return '正常'
      }
      return {
        id: this.$route.params.id,
        identity: this.$route.query.identity,
        info: {},
        total: 0,
        params: {
          pageSize: 1,
          pageNumber: 10,
          type: 0,
          id: '',
        },
        params2: {
          pageSize: 10,
          pageNumber: 1,
          queryCriteria: {
            spoorerId: 0,
            username: '',
            cellphone: '',
          },
        },
        params3: {
          type: 1,
          id: 0,
          pageSize: 10,
          pageNumber: 1,
        },
        searchOptions: [
          {
            type: 'text',
            prop: 'username',
            label: '分销员名称：',
            placeholder: '请输入分销员名称',
          },
          {
            type: 'text',
            prop: 'cellphone',
            label: '分销员手机号：',
            placeholder: '请输入分销员手机号',
          },
        ],
        tableColumn: [
          {
            prop: 'username',
            label: '分销员名称',
          },
          {
            prop: 'cellphone',
            label: '手机号',
          },
          {
            prop: 'spoorer',
            label: '所属招生顾问',
          },
          {
            prop: 'inviteuser',
            width: 150,
            label: '邀请人(上一级）',
          },
          {
            prop: 'lowercount',
            label: '下一级人数',
          },
          {
            prop: 'createdate',
            label: '成为分销员时间',
          },
          {
            prop: 'status',
            label: '分销状态',
            formatter: formatter,
          },
          {
            prop: 'allbalance',
            label: '累计获得积分',
          },
          {
            prop: 'orderMoney',
            width: 150,
            label: '消费金额（元）',
          },
          {
            prop: 'remark',
            label: '备注',
          },
        ],
        tableData: [],
      }
    },
    computed: {
      name() {
        if (this.identity == 1) {
          return '成为分销员时间'
        } else {
          return '成为招生顾问时间'
        }
      },
      downPeople() {
        if (this.identity == 1) {
          return '下一级人数'
        } else {
          return '下级人数'
        }
      },
      downinfo() {
        if (this.identity == 1) {
          return '下一级信息'
        } else {
          return '下级信息'
        }
      },
    },
    mounted() {
      // this.id = this.$route.params.id
      // this.identity = this.$route.query.identity
      this.getList()
      this.getCounselorDown()
    },
    methods: {
      getList() {
        if (this.identity == 1) {
          getDistributorDetail({ id: this.id }).then((res) => {
            if (res.code === 200) {
              this.info = res.data
            } else {
              this.$baseMessage(res.msg, 'error')
            }
          })
        } else {
          //分销顾问详情
          getCounselorDetail({ id: this.id }).then((res) => {
            if (res.code === 200) {
              if (res.data.imgUrl) {
                res.data.imgUrl = imageUrl(res.data.imgUrl)
              }
              this.info = res.data
            } else {
              this.$baseMessage(res.msg, 'error')
            }
          })
        }
      },
      getCounselorDown() {
        this.$refs.table.loading = true
        if (this.identity == 2) {
          this.params2.queryCriteria.spoorerId = this.id
          getCounselorDown(this.params2).then((res) => {
            if (res.code == 200) {
              this.tableData = res.data.list
              this.total = res.data.total
              setTimeout(() => {
                this.$refs.table.loading = false
              })
            } else {
              this.$baseMessage(res.msg, 'error')
            }
          })
        } else {
          this.params3.id = this.id
          getDistributorUpDown(this.params3).then((res) => {
            if (res.code == 200) {
              this.tableData = res.data.list
              this.total = res.data.total
              setTimeout(() => {
                this.$refs.table.loading = false
              })
            } else {
              this.$baseMessage(res.msg, 'error')
            }
          })
        }
      },
      handleStatus(status) {
        if (status == 1) return '正常'
        return '冻结'
      },
      pageClick(pager) {
        if (this.identity === 1) {
          this.params3.pageNumber = pager
        } else {
          this.params2.pageNumber = pager
        }
        this.getCounselorDown()
      },
    },
  }
</script>

<style lang="scss" scoped>
  @import '../../assets/styles/common.css';
  @import '../../assets/styles/dialog.scss';
  .detail-container {
    padding: 20px 40px 40px !important;
    .main-info-warpper {
      .main-info-title {
        position: relative;
        height: 60px;
        border-bottom: 1px solid #eee;

        &:after {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 80px;
          height: 3px;
          content: '';
          background-color: #409eff;
          border-radius: 3px;
          transition: all 0.5s ease;
        }

        &:hover:after {
          width: 120px;
        }
      }
      .asset {
        .asset-content {
          justify-content: space-around;
          .asset-item {
            flex: 1;
            height: 200px;
            margin-right: 30px;
            font-size: 18px;
            color: #666;
            background-color: #f5f5f5;
          }
        }
      }
    }
  }
</style>
